<template>
  <div class="page">
    <div class="page-top">
      <!-- 面包屑 -->
      <Hreadcrumb :hreadcrumbAry="hreadcrumbAry" />
    </div>
    <div class="page-content">
      退款金额：
      <a-input class="input-item" v-model="totalAmount"></a-input>
      原商户订单编号：
      <a-input class="input-item" v-model="oriBillNo"></a-input>
      退款原因：
      <a-textarea auto-size class="input-item" style="width: 400px;;min-height:80px" v-model="refundReason" /> 
      只分账撤销:
      <a-switch class="input-item" style="width:60px" checked-children="YES" un-checked-children="NO" @change="onChange" />
      <a-button class="input-item" style="width:80px" type="primary" @click="onSubmit">提交</a-button>
    </div>
  </div>
</template>
<script>
import Hreadcrumb from "@/components/Hreadcrumb";
import { refund } from "@/request/api";
export default {
  data() {
    return {
      hreadcrumbAry: [
        { name: "首页", path: "/", query: {} },
        { name: "手动退款", path: "/MTRefund", query: {} },
      ],
      totalAmount:'',
      oriBillNo:'',
      refundReason:'',
      value:false
    };
  },
  components: {
    Hreadcrumb,
  },
  methods: {
    onChange(checked){
      this.value = checked
    },
    onSubmit(){
      let params = {
        totalAmount:parseFloat(this.totalAmount)*100,
        oriBillNo:this.oriBillNo,
        refundReason:this.refundReason,
        refundCancel:this.value?'YES':'NO'
      }
      let _this = this
      this.$confirm({
          title: '确定手动退款',
          content: '',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            _this.refund(params)
          },
          onCancel() {
            console.log('Cancel');
          },
        });
    },
    async refund(params){
      let response = await refund(params)
      console.log(response)
      let res = response.data
      if(res.success){
        this.$message.success(res.content);
      }else{
        this.$message.error(res.message);
      }
    }
  
  },
};
</script>
<style>
.page-content {
  background-color: #fff;
  padding: 25px;
  display:flex;
  flex-direction: column;
}
.input-item{
  width: 200px;
  margin-top: 10px;
  margin-bottom: 20px;
}
</style>